<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta  charset="UTF-8">
    <title>Title</title>
    <style>
  div{
      border: 1px solid red;
  }
        #div1{

            width: 100px;
            height: 100px;
        }
        #div2 {

            width: 50px;
            height: 50px;
        }
        #div3{

            width: 50px;
            height: 50px;
        }


    </style>

</head>
<body>
<div id="div1">
     div1 <div id="div2"> div2</div>
</div>
<input  id="del"  type="button"  value="删除节点">
<input  id="add"  type="button"  value="增加节点">

<script>
    document.getElementById("del").onclick=function(){
        //给删除按钮绑定单击事件
         var div1 = document.getElementById("div1");
         //获取标签div1对象
          var div2 = document.getElementById("div2");
          //获取标签div2标签对象
            div1.removeChild(div2);
            //调用节点对象的removeChild方法移除节点也就是移除标签
    }
    document.getElementById("add").onclick=function(){
        //获取增减按钮对象并绑定单击事件
          var div1 = document.getElementById("div1");
          //获取标签div1对象
             var div3 = document.createElement("div");
             //使用document对象中的createElement属性创建元素也就是标签div3
              div3.setAttribute("id","div3");
              //
            div1.appendChild(div3);
    }


</script>
</body>
</html>